<template>
  <div class="health-container">
    <div class="header">
      <h2>健康监测</h2>
      <div class="time-range">
        <span>日</span>
        <span>周</span>
        <span class="active">月</span>
        <span>6个月</span>
        <span>年</span>
      </div>
    </div>

    <div id="heartRateChart" class="chart-box"></div>

    <div class="metrics-container">
      <!-- 指标卡片保持不变 -->
      <div class="metric-card">
        <div class="metric-label">最新</div>
        <div class="metric-value">72 <span>次/分</span></div>
      </div>
      <div class="metric-card">
        <div class="metric-label">范围</div>
        <div class="metric-value">20 <span>次/分</span></div>
      </div>
      <div class="metric-card">
        <div class="metric-label">静息心率</div>
        <div class="metric-value">60 <span>次/分</span></div>
      </div>
      <div class="metric-card">
        <div class="metric-label">离心率</div>
        <div class="metric-value">110 <span>次/分</span></div>
      </div>
      <div class="metric-card">
        <div class="metric-label">低心率</div>
        <div class="metric-value">52 <span>次/分</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'Health',
  data() {
    return {
      chartInstance: null,
      handleResize: null
    };
  },
  mounted() {
    // 直接初始化图表
    this.$nextTick(() => {
      const chartDom = document.getElementById("heartRateChart");
      
      if (!chartDom) {
        console.error('无法找到图表容器');
        return;
      }
      
      try {
        this.chartInstance = echarts.init(chartDom);
        
        // 图表配置（保持不变）
        const option = {
          title: {
            text: "心率监测",
            left: "center",
            textStyle: {
              color: "#333",
              fontSize: 16
            }
          },
          tooltip: {
            trigger: "axis"
          },
          xAxis: {
            type: "category",
            data: ["08:00", "10:00", "12:00", "14:00", "16:00"],
            axisLine: {
              lineStyle: {
                color: "#ccc"
              }
            }
          },
          yAxis: {
            type: "value",
            min: 0,
            max: 100,
            interval: 20,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ccc"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#f0f0f0"
              }
            }
          },
          series: [{
            data: [88, 78, 74, 88, 75],
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 3,
              color: "#5470c6"
            },
            itemStyle: {
              color: "#5470c6"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(84, 112, 198, 0.3)" },
                { offset: 1, color: "rgba(84, 112, 198, 0.1)" }
              ])
            }
          }],
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          }
        };
        
        // 应用配置
        this.chartInstance.setOption(option);
        
        // 响应式调整
        this.handleResize = () => {
          if (this.chartInstance) {
            this.chartInstance.resize();
          }
        };
        
        window.addEventListener("resize", this.handleResize);
      } catch (error) {
        console.error('初始化图表时发生错误:', error);
      }
    });
  },
  beforeDestroy() {
    // 组件销毁时释放资源
    window.removeEventListener("resize", this.handleResize);
    if (this.chartInstance) {
      this.chartInstance.dispose();
      this.chartInstance = null;
    }
  }
}
</script>

<style scoped>
.health-container {
  font-family: "Arial", sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  color: #2c3e50;
  font-size: 24px;
  margin: 0;
}

.time-range {
  display: flex;
  gap: 15px;
  background: #e9ecef;
  padding: 6px 12px;
  border-radius: 20px;
}

.time-range span {
  padding: 4px 10px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  color: #6c757d;
}

.time-range .active {
  background-color: #5470c6;
  color: white;
}

.chart-box {
  width: 100%;
  height: 400px;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* 添加z-index确保图表显示在其他元素之上 */
  z-index: 1;
}

.metrics-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 25px;
}

.metric-card {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.metric-label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
}

.metric-value span {
  font-size: 14px;
  font-weight: normal;
  color: #6c757d;
}
</style>